<template>
        <div id="drzx" class="container-fluid padding">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>所有上传的ivr文件列表</legend>
            </fieldset>
            <table class="layui-hide" id="ivrTuFilelist" lay-filter="ivrTuFilelist"></table>
            <script type="text/html" id="fileBar">
              <button class="el-button el-button--success is-round el-button--mini"  lay-event="download">下载</button>
              <button class="el-button el-button--primary is-round el-button--mini" lay-event="edit">编辑</button>
              <button class="el-button el-button--danger is-round el-button--mini" lay-event="del">删除</button>
            </script>
            <script type="text/html" id="fileToolbar">
                <!--重新上传下载ivr文件-->
                <a class="layui-btn layui-btn-sm" :href="ivrurl" download="IVREditor.exe">
                    <span class="el-button el-button--success is-round el-button--mini">下载ivr流程图编辑程序</span>
                </a>
              <button class="el-button el-button--success is-round el-button--mini"  lay-event="refresh">刷新</button>
            </script>
            <!--文件上传-->
            <el-upload
                    class="upload-demo padding"
                    drag
                    :with-credentials="credentials"
                    :on-success="onSuccess"
                    :on-error="onError"
                    limit="1"
                    on-exceed
                    style="width: 500px"
                    :action="burl+'cti-manager-ivr-tu/upload/'">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">点击上传，或将文件拖拽到此处，如果注册网关失败请点击上方按钮重新注册网关</div>
            </el-upload>
            <div id="uploadFiles" style="display: none;">
                <div  class="container-fluid padding">
                    <form id="autoUploadFileForm" v-bind:action="burl+'cti-manager-ivr-tu/upload/'">
                        <div id="autoUploadFile">
                        </div>
                    </form>
                </div>
            </div>
        </div>
</template>
<script>
    import {formatSize,formatDateTime} from '../../../../common/js/util';
    export default {
        name: "ivrTu",
        beforeCreate: function(){
            this.$nextTick(function () {
                layui.use('table');// 坐席的表格数据,首次加载出来dom
                layui.use('upload');
            });
        },
        created:function(){
            this.$nextTick(function () {
                // 再次加载出表格数据（之前已经加载出来了dom数据）
                layui.use('table', ()=> {//加这个是防止刷新的时候会出现不存在render方法
                    // 再次加载出表格数据（之前已经加载出来了dom数据）
                    this.$message_.layTable(this,'cti-manager-ivr-tu/file-list','#ivrTuFilelist',{},this.file_table_head,400,'#fileToolbar',true);
                    //监听行工具事件
                    layui.table.on('tool(ivrTuFilelist)', (obj)=>{
                        if(obj.event === 'del'){
                            layer.confirm('确认删除该行吗？', (index)=>{
                                layer.close(index);
                                this.$message_.postTips(this,'删除','cti-manager/file-delete?id='+obj.data.id,null,()=>{
                                    this.$message({message:'删除成功',type:'success'})
                                    obj.del();
                                })
                            });
                        } else if(obj.event === 'download'){
                            this.$my_.downloadFile(obj.data.name,obj.data.path)
                        } else if(obj.event === 'edit'){//查询语音文件数据
                            this.fileData = obj.data.params;
                            this.alertFrame(obj);
                        }
                    });
                    layui.table.on('toolbar(ivrTuFilelist)', (obj)=>{
                        if(obj.event === 'refresh'){
                            noCheckCache = true
                            this.$message_.layTable(this,'cti-manager-ivr-tu/file-list','#ivrTuFilelist',{},this.file_table_head,400,'#fileToolbar',true);
                        }
                    });
                });
            });
        },
        data() {
            return {
                fileSaved: false,
                ivrurl: burl+"downloads/cti/IVREditor.exe",
                credentials:true,
                burl:burl,
                fileData:{},
                file_table_head:[
                    {field: 'id',  title: '序列号', sort: true}
                    , {field: 'name',  title: '文件名称', sort: true}
                    , {field: 'path',  title: '文件路径', sort: true}
                    , {field: 'filesize',
                        title: '文件大小',
                        sort: true,
                        templet: function(res){
                            return formatSize(res.filesize);
                        }}
                    , {field: 'create_at',
                        title: '创建时间',
                        sort: true,
                        templet: function(res){
                            return formatDateTime(res.create_at);
                        }}
                    , {field: 'update_at',
                        title: '更新时间',
                        sort: true,
                        templet: function(res){
                            return formatDateTime(res.update_at);
                        }}
                    , {field: 'params',
                        title: '上传语音文件状态',
                        width: 180,
                        templet: function(res){
                            let o = JSON.parse(res.params);
                            var has = 0;
                            var all = 0;
                            for (let i in o.fileData){
                                if(o.fileData[i].state!='no'){
                                    has++;
                                }
                            }
                            for (let i in o.fileData){
                                all++;
                            }
                            return '上传文件'+has+'/'+all;
                        }}
                    , {fixed: 'right',
                        width: 225,
                        align:'center',
                        templet: '#fileBar',
                    }
                ],
            }
        },
        methods: {
            onSuccess:function(res){
                if (res==1){
                    this.$message({message:'文件已经上传，请选择其他的文件上传！',type:'error'})
                    return false
                }else{
                    this.$message({message:'文件上传成功！',type:'success'})
                }
            },
            onError:function(res){
                if (res){
                    this.$message({message:'上传失败！',type:'error'})
                }
            },
            alertFrame: function (obj) {
                var res = JSON.parse(obj.data.params);
                var id = obj.data.id
                var data = res.fileData;
                var temp = "";
                for(let i in data){
                    let fileData = data[i].filepath;
                    let state = data[i].state;
                    temp += '<button type="button" class="el-button '+(state=="no"?"el-button--success":"is-disabled")+'" '+(state=="yes"?"disabled=\"disabled\" ":" ")+'id="fileData'+i+'">' +
                        '<i class="fa fa-upload"></i>请选择文件“'+fileData+'”</button>' +
                        '<div class="layui-input-inline">' +
                        '<input type="text" class="el-input__inner" readonly value="'+fileData+'"/>' +
                        '</div>' +
                        '<button type="button" class=" el-button el-button--primary" onclick="javascript:{' +
                        '$(this).prev().find(\'input\').select();' +
                        'document.execCommand(\'Copy\');layer.msg(\'复制成功！\')}">复制该路径</button>' +
                        '<br/>' +
                        '<br/>';
                }
                $("#autoUploadFile").html(temp);
                layui.use('upload', ()=>{
                    var upload = layui.upload;
                    for (let i in data) {
                        //执行实例
                        upload.render({
                            elem: '#fileData' + i //绑定元素
                            , url: burl + 'cti-manager-ivr-tu/upload-fs/' //上传接口
                            , data: {type: "cti_ivr_tu_wav",id:id,params:JSON.stringify(data)}
                            , accept: 'audio' //允许上传的文件类型
                            , done:  (res)=> {
                                if (res) {//文件上传
                                    this.fileSaved = true;
                                    this.$message({message:'文件上传成功！',type:'success'});
                                    data[i].state = "yes";
                                    res.fileData = data;
                                    this.$post('cti-manager-ivr-tu/update',{id:id,data:res})
                                        .then((response) => {//这里使用了ES6的语法
                                            if (response.data) {
                                                obj.data.params = JSON.stringify({fileData:data});
                                                obj.update(obj.data)
                                                $("#fileData"+i).removeClass("el-button--success")
                                                $("#fileData"+i).addClass("is-disabled")
                                                $("#fileData"+i).attr("disabled","disabled")
                                            }
                                        }).catch((response) => {
                                            consoleLog(response)
                                    });
                                }
                            }
                            , error: function (err) {
                                consoleLog(err)
                            }
                        });
                    }
                });
                //编辑页面页面层
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['80%', '70%'], //宽高
                    close: true,
                    title: '上传语音文件',
                    shadeClose: true,
                    content:$("#uploadFiles"),
                });
            }
        }
    }
</script>